<template>
	<view class="contractDetail">
		<!-- 房间轮播图 -->
		<view class="top_image">
			<swiper :circular="true" :autoplay="false" :interval="3000">
				<swiper-item v-for="item in houseDetials.image" :key="item.id">
					<image mode="scaleToFill" class="image" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 房间类型+房间面积+月租金 -->
		<view class="info-item top-item">
			<text class="label label-price">{{ houseDetials.price }}</text>
			<text class="price-text"> 元/月</text>
			<text class="type">{{houseDetials.contractType}} </text>
		</view>
		<view class="info-item">
			<view class="info-item-box">
				<view class="info-item-box-item">
					<view class="context">{{houseDetials.nature}}</view>
					<view class="title">整租</view>
				</view>
				<view class="info-item-box-item">
					<view class="context">{{houseDetials.floor}}</view>
					<view class="title">楼层</view>
				</view>
				<view class="info-item-box-item">
					<view class="context">{{houseDetials.usageArea}}</view>
					<view class="title">面积</view>
				</view>
				<view class="info-item-box-item item-time">
					<view class="context">2020-12-23 12:08:09</view>
					<view class="title">上次打扫</view>
				</view>
			</view>
		</view>
		<!-- 房间地址+地图 -->
		<view class="room-location">
			<view class="location-info">
				<text class="context">{{ houseDetials.address }} · {{ houseDetials.name }}</text>
			</view>
		</view>
		<!-- 房间描述 -->
		<view class="room-description">
			<view >
				<text class="label">房屋介绍：</text>
			</view>
			<view >
					<text class="context">{{ houseDetials.description }}</text>
			</view>
		
		</view>
		<!-- 签约按钮 -->
		<view class="sign-contract">
			<button type="primary" round block @tap="goRouter()">预约看房</button>
			<button type="primary" round block @tap="goRouter()">签约房屋</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { getHouseDetails } from '@/services/contract';
	import type { HouseItem } from '/@/types/golbal'
	import { ref } from 'vue';

	let houseDetials : HouseItem = ref({})
	let contractId = ''
	onLoad(async (option) => {
		if (option) {
			console.log(option)
			contractId = option.contractId
			const res = await getHouseDetails(option.contractId)
			houseDetials.value = res.data
		}
	});

	const goRouter = () => {
		console.log("@@@", contractId);
		uni.navigateTo({
			url: `/pages/contract/contract?contractId=${contractId}`

		});
	};
</script>

<style scoped>
	.top_image {
		height: 150px;
	}

	.carousel-container {
		margin-bottom: 20px;
	}

	.label {
		font-size: 32rpx;
		color: #333;

	}

	.label-price {
		font-size: 20px;
		font-weight: 700;
		color: #34b5bb;
	
	}

	.price-text {
		font-size: 28rpx;
		color: #34b5bb;
	
	}

	.top-item {
		text-indent: 1em;
	}

	.type {
		
		font-size: 16px;
		color: #666;
	}

	.room-description {
		margin-bottom: 20rpx;
		text-indent: 1em;
	}

	.room-location {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.location-info {
		flex: 1;
		text-indent: 1em;
	}

	.info-item-box {
		display: flex;
		background-color: #ffffff;
		padding-left: 10px;
		margin:auto;
		width: calc(100% - 20px);
		border-radius: 5px;
		
	}

	.info-item-box-item {
		text-align: center;
		width: 65px;
	}

	.item-time {
		width: 120px;
	}

	.title {
		font-size: 12px;
		color: #aaaaaa;
	}

	.context {
		font-size: 13px;
		color: #333333;
		font-weight: 700;
	}


	.sign-contract {
		margin-top: 40rpx;
		display: flex;
	}

	button {
		width: 120px;
	}
</style>